<template>
  <!-- <SongList :song='songList' @play='$emit("play",$event)'></SongList> -->
  <!-- <div></div> -->
  <ul class="songlist">
    <li v-for="(item,index) in songList" :key='item.id'  @click="$emit('play',item)">
      <!--  v-show="showNum" -->
      <i :class="['num',{red:index<3}]">{{(index+1)|addZero}}</i>
      <div class="left">
        <h5 >{{item.name}}</h5>
        <p>
          <i v-show="item.privilege&&item.privilege.playMaxbr==999000" class="sq"></i>
          {{item.ar[0].name}} -{{item.name}}
        </p>
      </div>
      <div class="right">
        <a class="playBtn" href="javascript:;"></a>
      </div>
    </li>
  </ul>
</template>
<script>

export default {
  props:['id'],
  data(){
    return{
      songList:[],
      newsongList:[],
    }
  },
  filters:{
    addZero(val){
      return val<10?'0'+val:val
    }
  },
  created(){
    this.$http.get('/artists/desc',{
      params:{
        id:this.id
      }
    }).then(da=>{
      // console.log(da.data.hotSongs);
      this.songList = da.data.hotSongs;
      this.newsongList = da.data.hotSongs.map((d)=>{
        let data = d;
        data.song={
          artists:d.ar, 
          privilege:{
            playMaxbr:d.privilege.playMaxbr
          }
        }
        return data
      })
      console.log(this.newsongList);
    })
  }
}
</script>
<style lang="less" scoped>
.songlist{
  li{
     padding: 6px 0px;
     display: flex;
     border: 0px solid transparent;
     border-bottom: 1px solid #F4F4F4;
     padding-left: 10px;
     i{
       font-style: normal;
       line-height: 42px;
     }
     i.red{
       color:#EE6A22;
     }
     .left{
       flex: 1;
       padding-left: 5px;
       h5{
         font-size: 17px;
         font-weight: 400;
       }
       p{
          font-size: 12px;
          color: #888;
          i.sq{
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
            background: url('../assets/index_icon_2x.png') no-repeat;
            background-position: 0 0;
            background-size: 166px 97px;
          }
       }
      }
     .right{
        width: 22px;
        height: 42px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        .playBtn{
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url('../assets/index_icon_2x.png') no-repeat;
          background-position: -24px 0;
          background-size: 166px 97px;

        }
    }
  } 
 
  
}

</style>